<div id="accordion">
<div class="card">
    <div class="card-header">
        <h4 class="card-title">Problems</h4>
        <div class="card-tools">
            <span id="problems-count" data-toggle="tooltip" title="?" class="badge bg-primary">?</span>
        </div>
    </div>
    <div class="card-body p-0">
        <table id="problems-table" class="table table-sm table-hover table-striped table-head-fixed">
            <thead>
                <tr>
                    <th class="text-center">Label</th>
                    <th width=90%>Name</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
</div>
<script type="text/html" id="problems-template">
  <td align=center><span class="badge" style="background-color:{{rgb}}; width:25px; border:1px solid {{border}}"><font color={{fg}}>{{label}}</font></span></td>
  <td>{{name}}</td>
</script>
<script type="text/javascript">
registerContestObjectTable("problems");

$(document).ready(function () {
	$.when(contest.loadProblems()).done(function () {
        fillContestObjectTable("problems", contest.getProblems())
    }).fail(function (result) {
    	console.log("Error loading problems: " + result);
    });
});
</script>